<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block   th:include="themes/bobey/blog_include :: blogHeader(title=${blogConfig['blog.config.title'].configValue},
keywords=${blogConfig['blog.config.keywords'].configValue},
description=${blogConfig['blog.config.description'].configValue},
blogConfig=${blogConfig})"/>

</head>
<body>

<th:block th:include="themes/bobey/blog_include::menu(menus=${@menuTag.getMenu(21)},blogConfig=${blogConfig})"/>
<!-- 主体部分 -->
<section class="bobey-main-box">
    <div class="layui-container">
        <!-- login start -->
        <div id="login">
            <p>注册</p>
            <form class="layui-form" id="signupForm" autocomplete="new-password">
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" name="email"  lay-verify="required|email" placeholder="请输入邮箱" autocomplete="new-password" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-block">
                        <input type="text" name="emailCode" placeholder="请输入密码"  lay-verify="required" autocomplete="new-password"  class="layui-input">

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" id="getEmailCode">获取验证码</button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required="required" lay-verify="required" placeholder="请输入密码" autocomplete="new-password" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-block">
                        <input type="text" name="validateCode"   lay-verify="required|number" placeholder="验证码" autocomplete="off" class="layui-input" id="usercode">
                        <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-disabled" disabled lay-submit="" lay-filter="register"  id="btnSubmit">注册</button>
                    </div>
                </div>
            </form>
            <fieldset class="layui-elem-field">
                <legend>使用第三方登录</legend>
                <div class="layui-field-box">
                    <!--<a href="/register.html" rel="nofollow" class="layui-btn layui-btn-info layui-btn-xs">注册</a>-->
                    <!--<a href="" rel="nofollow" class="layui-btn layui-btn-info layui-btn-xs">QQ登录</a>
                    <a href="" rel="nofollow" class="layui-btn layui-btn-info layui-btn-xs">Github登录</a>-->
                </div>
            </fieldset>
        </div>
        <!-- login end -->
    </div>

</section>
<style>
    /*登录样式*/
    #login {
        width: 350px;
        height: 500px;
        margin: 0 auto;
        background-color: #FFF;
        border-radius: 5px;

    }

    #login p {
        font-size: 32px;
        text-align: center;
        padding: 20px 0;
    }

    #login form {
        padding: 10px;
    }



    #login .layui-form .layui-form-item .layui-input-block {
        margin-left: 80px;
        padding-right: 40px;
    }

    #login .layui-elem-field legend {
        text-align: center;
    }

    #login .layui-field-box {
        text-align: center;
        padding: 20px 0;
    }

    #login .layui-elem-field {
        margin-top: 20px;
        border-bottom: 0;
        border-left: 0;
        border-right: 0;
    }

    #usercode {
        width: 65px;
        margin-right: 10px;
        float: left;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .imgcode{
        width: 88px;
        height: 38px;
    }

    #sendCode {
        padding: 0 10px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    footer{
        position: fixed;
        bottom: 0;
        width: 100vw;
    }

</style>
<!-- 底部导航 -->
<th:block th:include="themes/bobey/blog_include::bottom"/>
<th:block th:include="themes/bobey/blog_include::footer_js"/>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.1.0}"></script>
<script th:inline="JavaScript">


    layui.use([ 'element', 'carousel', 'layer','form'], function() {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var layer = layui.layer;
        var form = layui.form;
        var carousel = layui.carousel;

        $(function() {
            validateKickout();
            $('.imgcode').click(function() {
                var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();
                $(".imgcode").attr("src", url);
            });
        });
        function validateKickout() {
            if (getParam("kickout") == 1) {
                layer.alert("<font color='red'>您已在别处登录，请您修改密码或重新登录</font>", {
                        icon: 0,
                        title: "系统提示"
                    },
                    function(index) {
                        //关闭弹窗
                        layer.close(index);
                        if (top != self) {
                            top.location = self.location;
                        } else {
                            var url  =  location.search;
                            if (url) {
                                var oldUrl  = window.location.href;
                                var newUrl  = oldUrl.substring(0,  oldUrl.indexOf('?'));
                                self.location  = newUrl;
                            }
                        }
                    });
            }
        }

        function getParam(paramName) {
            var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return null;
        }
        var wait = 60,btnSub=$("#btnSubmit");
        function time(btn){
            if (wait===0) {
                btn.attr("disabled","");
                btn.html("获取验证码");
                btn.removeClass("layui-disabled");
                wait = 60;
            }else{
                btn.attr("disabled",'disabled');
                btn.html(wait + "秒后可获取");
                btnSub.attr("disabled","");
                btnSub.removeClass("layui-disabled");
                btn.addClass("layui-disabled");
                wait--;
                setTimeout(function(){
                    time(btn);
                },1000);
            }
        };
        $("#getEmailCode").click(function () {
            //验证是否正确输入邮箱
            var emailRex= /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            var username = $.common.trim($("input[name='email']").val());
            if(!emailRex.test(username)){
                layer.msg("请输入正确邮箱!");
            }
            else {
                $.ajax({
                    type: "get",
                    url: ctx + "blog/user/sendEmailCode/"+$.common.trim($("input[name='email']").val()),
                    success: function(r) {
                        if(r.code==0)
                        {  time($("#getEmailCode"));
                            layer.msg(r.msg) }
                        else {
                            layer.msg(r.msg);
                        }

                    }
                });
            }
        })
        function register() {
            var username = $.common.trim($("input[name='email']").val());
            var password = $.common.trim($("input[name='password']").val());
            var validateCode = $("input[name='validateCode']").val();
            var emailCode = $.common.trim($("input[name='emailCode']").val());
            $.ajax({
                type: "post",
                url: ctx + "blog/user/register",
                data: {
                    "email": username,
                    "password": password,
                    "validateCode" : validateCode,
                    "emailCode":emailCode
                },
                success: function(r) {
                    if (r.code == 0) {
                        /*跳转到博客主页*/
                        location.href = ctx + 'blog/index';
                    } else {
                        $.modal.closeLoading();
                        $('.imgcode').click();
                        $(".code").val("");
                        $.modal.msg(r.msg);
                    }
                }
            });
        }


        //监听提交
        form.on('submit(register)', function(data){
           register();
            return false;
        });

    });
</script>



</body>

</html>